<template>
  <div>
    <input v-model="lastName" type="text">
    <input v-model="fastName" type="text">
    <div>{{ name }}</div>
    <div>{{ nameTwo }}</div>
    <hr>
    <table border style="width: 1000px;">
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
          <th>单价</th>
          <th>金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i)  in data" :key="i">
          <th>
            {{ item.name }}
          </th>
          <th>
            <button @click="addAddSub(item, true)">+</button> {{ item.num }}<button
              @click="addAddSub(item, false)">-</button>
          </th>
          <th>{{ item.price }}</th>
          <th>
            {{ item.num* item.price }}
          </th>
          <th>
            <button @click="del(i)">删除</button>
          </th>
        </tr>
      </tbody>
      <tfoot>
        <td></td>
        <td></td>
        <td></td>
        <td align="center">{{ "总价："+$total }}</td>
      </tfoot>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

console.log(route.query.id)

let lastName = ref('')
let fastName = ref('')
let $total = ref(0)
type shop = {
  name: string,
  num: number,
  price: number
}
let data = reactive<shop[]>([
  {
    name: '假面骑士一号',
    num: 1,
    price: 100
  }, {
    name: '假面骑士空我',
    num: 1,
    price: 200
  }, {
    name: '假面骑士甲斗',
    num:1,
    price: 500
  },
  {
    name: '假面骑士decade',
    num: 1,
    price: 999
  }
])
const addAddSub = (item: shop, type: boolean): void => {
  if (item.num > 0 && !type) {
    item.num--
  }
  if(item.num<99 && type){
    item.num++

  }
}
const del = (i:number)=>{
  data.splice(i,1)
}
  $total =  computed(()=>{
    console.log(data);
  return data.reduce((prev, next) => {
    return prev + (next.num * next.price)
  }, 0)
})

// const total = ()=>{  //普通方式计算总价
//   $total.value =   data.reduce((prev,next)=>{
//     return prev + (next.num * next.price)
//     },0)
// }
// total()
const name = computed(() => {
  return lastName.value + '=======' + fastName.value //需要将值抛出
})
const nameTwo = computed({
  get() {

    return lastName.value + '=======' + fastName.value //在get出将值抛出
  },
  set() {

    lastName.value + '=======' + fastName.value
  }
}
)
</script>
<style scoped lang='less'>
</style>